<template>
  <div>
    <el-dialog
      @close="handleClose(false)"
      @open="handleOpen"
      close-on-press-escape
      v-dialogDrag
      :title="isedit ? '编辑网关类型' : '添加网关类型'"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :visible="showDialog"
      v-if="showDialog"
    >
      <el-tabs
        v-model="activeName"
        :tab-position="tabPosition"
        class="tabHight"
      >
        <el-tab-pane name="first" label="详情">
          <el-form
            :model="deviceGroupForm"
            :rules="deviceGroupRules"
            ref="deviceGroupForm"
            size="mini"
            label-width="auto"
            class="tabHight_auto"
          >
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <el-form-item label="Token:" prop="token">
                  <el-input
                    :disabled="isedit"
                    v-model="deviceGroupForm.token"
                    placeholder="Token"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24" :offset="0">
                <el-form-item label="名称:" prop="name">
                  <el-input
                    v-model="deviceGroupForm.name"
                    placeholder="请输入名称"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24" :offset="0">
                <el-form-item label="硬盘信息:" prop="hardDisk">
                  <el-input
                    :disabled="isedit"
                    v-model="deviceGroupForm.hardDisk"
                    placeholder="请输入硬盘信息"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0">
                <el-form-item label="内存:" prop="memory">
                  <el-input
                    :disabled="isedit"
                    v-model="deviceGroupForm.memory"
                    placeholder="请输入内存"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0">
                <el-form-item label="cpu:" prop="cpu">
                  <el-input
                    :disabled="isedit"
                    v-model="deviceGroupForm.cpu"
                    placeholder="请输入cpu"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0">
                <el-form-item label="型号:" prop="model">
                  <el-input
                    :disabled="isedit"
                    v-model="deviceGroupForm.model"
                    placeholder="请输入型号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0">
                <el-form-item label="品牌:" prop="brand">
                  <el-input
                    :disabled="isedit"
                    v-model="deviceGroupForm.brand"
                    placeholder="请输入品牌"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0">
                <el-form-item label="描述:" prop="description">
                  <el-input
                    type="textarea"
                    :rows="4"
                    v-model="deviceGroupForm.description"
                    placeholder="请输入描述"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0">
                <el-form-item label="网关类别:" prop="assetCategory">
                  <el-select
                    v-model="deviceGroupForm.assetCategory"
                    placeholder="请选择"
                    disabled
                    class="w100"
                  >
                    <el-option
                      v-for="item in typeList"
                      :key="item.token"
                      :label="item.name"
                      :value="item.token"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="图像:" prop="imageUrl">
              <div style="display: flex">
                <app-upload
                  style="width: 100px; heigh: 100px; margin-right: 10px"
                  tips=""
                  :is-resolution="true"
                  @subUploadSucceed="handleUploadSucceed"
                />
                <div class="imageHome" v-if="showImg">
                  <img
                    v-if="deviceGroupForm.imageUrl"
                    :src="deviceGroupForm.imageUrl | filtersFileUrl()"
                    class="image-size"
                  />
                </div>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="second" label="元数据" prop="metadata">
          <metaData
            :editmetaData="editmetaData"
            :isedit="isedit"
            @sendmetaDatas="sendmetaData"
            ref="metaDataRef"
          />
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose(false)">取 消</el-button>
        <el-button
          v-if="isedit"
          :loading="btnLoading"
          v-permission="[26, 'button']"
          size="mini"
          type="primary"
          key="1"
          @click="submitForm('deviceGroupForm')"
          >确 定</el-button
        >
        <el-button
          :loading="btnLoading"
          key="2"
          v-else
          size="mini"
          type="primary"
          @click="submitForm('deviceGroupForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MetaData from "@/views/opensite/metaData.vue";
import AppUpload from "@/views/device/devicegroups/UploadImage.vue";
import { setAssetsType, putAssetsType } from "@/api/assets";
import { TOKEN_RULES } from "@/utils/local";
// var axios = require('axios');
export default {
  props: {
    // showDeviceAdd: {
    //   type: Boolean,
    //   default: false,
    // },
    token: {
      type: String,
      default: ""
    },
    isedit: {
      type: Boolean,
      default: false
    },
    showDialog: {
      type: Boolean,
      default: false
    },
    editmetaData: {
      type: Object,
      default: () => {}
    },
    typeList: {
      type: Array,
      default: () => []
    }
  },
  components: {
    MetaData,
    AppUpload
  },

  data() {
    return {
      activeName: "first",
      btnLoading: false,
      url: "",
      // showDialog: false,
      tabPosition: "left",
      deviceGroupForm: {
        token: "",
        imageUrl: "",
        name: "",
        metadata: {},
        assetCategory: "Device",
        brand: "",
        model: "",
        cpu: "",
        memory: "",
        hardDisk: ""
        // 品牌brand，型号model，cpu ,内存memory,硬盘信息-hardDisk
      },
      deviceGroupRules: {
        token: TOKEN_RULES,
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        // id: [{ required: true, message: "请输入id", trigger: "blur" }],
        // description: [
        //   { required: true, message: "请输入说明", trigger: "blur" },
        // ],
        assetCategory: [
          { required: true, message: "请选择网关类型", trigger: "change" }
        ],
        imageUrl: [{ required: true, message: "请上传图片", trigger: "blur" }]
      },
      metaDataJson: {},
      newRoles: "",
      editedRoles: []
    };
  },
  mounted() {},
  computed: {
    showImg: function() {
      return this.deviceGroupForm.imageUrl != "";
    }
  },
  watch: {
    // showDeviceAdd(newValue, oldValue) {
    //   // this.showDialog = newValue;
    //   // this.activeName = "first";
    //   // this.newRoles = "";
    // },
  },
  methods: {
    //弹窗打开执行操作
    handleOpen() {
      this.activeName = "first";
    },
    // 弹窗关闭执行操作
    handleClose(isRefresh, token) {
      this.$emit("closeDialog", isRefresh, token);
      this.cancelEmpty();
    },
    //取消清空数据
    cancelEmpty() {
      // this.showDialog = false;
      this.$emit("update:showDialog", false);
      this.deviceGroupForm = {
        token: "",
        imageUrl: "",
        name: "",
        description: "",
        metadata: {}
      };
      this.editedRoles = [];
      this.metaDataJson = {};
      this.$refs.metaDataRef.metaData = [];
      this.deviceGroupForm.assetCategory = "Device";
    },
    // 提交
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          let formData = {};
          formData = Object.assign({}, this.deviceGroupForm);
          formData.metadata = this.metaDataJson;
          formData.assetCategory = "Device";
          this.btnLoading = true;
          if (this.isedit) {
            putAssetsType(formData, this.token)
              .then(res => {
                this.$msg({
                  type: "success",
                  message: "操作成功!"
                });
                // this.showDialog = false;
                this.$emit("update:showDialog", false);
                this.$router.push({
                  path: "/_empty",
                  query: {
                    data: JSON.stringify({ assetTypeToken: res.data.token }),
                    path: "networkTypDetails"
                  }
                });
              })
              .finally(f => {
                this.btnLoading = false;
              });
          } else {
            setAssetsType(formData)
              .then(res => {
                this.$msg({
                  type: "success",
                  message: "操作成功!"
                });
                // this.showDialog = false;
                this.$emit("update:showDialog", false);
                this.handleClose(true);
              })
              .finally(f => {
                this.btnLoading = false;
              });
          }
        } else {
          this.$msg("请完善必要信息");
          return false;
        }
      });
    },
    //元数据页回传
    sendmetaData(md) {
      this.metaDataJson = md;
    },

    handleUploadSucceed(url) {
      this.deviceGroupForm.imageUrl = url;
    }
  }
};
</script>

<style lang="scss" scoped>
.addbutton {
  background-color: #2680d2;
  color: #ffffff;
  position: absolute;
  right: 0px;
  top: 0px;
}
.el-icon-plus {
  color: #ffffff;
}
.div-inline {
  display: inline;
  background-color: #e4e4e4;
  padding: 2px;
  border: 1px #5a5e66 solid;
  line-height: 25px;
  white-space: nowrap;
  word-wrap: break-word;
}
.imageHome {
  padding: 5px 5px 5px 5px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 2px;
  .image-size {
    width: 94px;
    height: 94px;
    /*background: #2E2E2E;*/
    border-radius: 50%;
    opacity: 1;
    display: flex;
  }
}
</style>
